﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="http://static.app/vue/index.css" rel="stylesheet">
    <link href="http://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css" rel="stylesheet">
    <script src="http://static.app/vue/vue.js"></script>
    <script src="http://static.app/vue/index.js"></script>
</head>
<body class="body">
    <div id="app">
        <el-container>
            <el-header class="header_0" style="-webkit-app-region:drag">
                <i class="el-icon-lightning"></i>痛苦值<i class="el-icon-bangzhu"></i>
            </el-header>
            <el-main>
                <el-row :gutter="10" class="el-row-x">
                    <el-col :span="2">
                        {{year_1}}
                    </el-col>
                    <el-col :span="2">
                        <div class="grid-content bg-1">年</div>
                    </el-col>
                    <el-col :span="2">
                        {{month_0}}{{month_1}}
                    </el-col>
                    <el-col :span="2">
                        <div class="grid-content bg-1">月</div>
                    </el-col>
                    <el-col :span="2">
                        {{day_0}}{{day_1}}
                    </el-col>
                    <el-col :span="2">
                        <div class="grid-content bg-1">日</div>
                    </el-col>
                    <el-col :span="2">
                        {{hour_0}}{{hour_1}}
                    </el-col>
                    <el-col :span="2">
                        <div class="grid-content bg-1">时</div>
                    </el-col>
                    <el-col :span="2">
                        {{minutes_0}}{{minutes_1}}
                    </el-col>
                    <el-col :span="2">
                        <div class="grid-content bg-1">分</div>
                    </el-col>
                    <el-col :span="2">
                        {{seconds_0}}{{seconds_1}}
                    </el-col>
                    <el-col :span="2">

                        <div class="grid-content bg-1">秒</div>
                    </el-col>
                </el-row>
                <el-row :gutter="10" class="el-row-y">
                    <el-col :span="2">
                        <div class="grid-content bg-24">{{f_day_3}}</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="grid-content bg-25">{{f_day_2}}</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="grid-content bg-26">{{f_day_1}}</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="grid-content bg-27">{{f_day_0}}</div>
                    </el-col>
                    <el-col :span="8">
                        <div class="amilao1">
                            <i class="el-icon-loading"></i>
                        </div>
                        <div class="amilao2">天</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="grid-content bg-24 bgf-24">{{df_day_3}}</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="grid-content bg-25 bgf-25">{{df_day_2}}</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="grid-content bg-26 bgf-26">{{df_day_1}}</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="grid-content bg-27 bgf-27">{{df_day_0}}</div>
                    </el-col>
                </el-row>
                <el-row :gutter="10" class="el-row-y">
                    <el-col :span="1">
                        <div class="grid-ss">{{f_seconds_7}}</div>
                    </el-col>
                    <el-col :span="1">
                        <div class="grid-ss">{{f_seconds_6}}</div>
                    </el-col>
                    <el-col :span="1">
                        <div class="grid-ss">{{f_seconds_5}}</div>
                    </el-col>
                    <el-col :span="1">
                        <div class="grid-ss">{{f_seconds_4}}</div>
                    </el-col>
                    <el-col :span="1">
                        <div class="grid-ss">{{f_seconds_3}}</div>
                    </el-col>
                    <el-col :span="1">
                        <div class="grid-ss">{{f_seconds_2}}</div>
                    </el-col>
                    <el-col :span="1">
                        <div class="grid-ss">{{f_seconds_1}}</div>
                    </el-col>
                    <el-col :span="1">
                        <div class="grid-ss">{{f_seconds_0}}</div>
                    </el-col>
                    <el-col :span="8">
                        <div class="amilao1">
                            <i class="el-icon-loading"></i>
                        </div>
                        <div class="amilao2">秒</div>
                    </el-col>
                    <el-col :span="1">
                        <div class="grid-ss">{{df_seconds_7}}</div>
                    </el-col>
                    <el-col :span="1">
                        <div class="grid-ss">{{df_seconds_6}}</div>
                    </el-col>
                    <el-col :span="1">
                        <div class="grid-ss">{{df_seconds_5}}</div>
                    </el-col>
                    <el-col :span="1">
                        <div class="grid-ss">{{df_seconds_4}}</div>
                    </el-col>
                    <el-col :span="1">
                        <div class="grid-ss">{{df_seconds_3}}</div>
                    </el-col>
                    <el-col :span="1">
                        <div class="grid-ss">{{df_seconds_2}}</div>
                    </el-col>
                    <el-col :span="1">
                        <div class="grid-ss">{{df_seconds_1}}</div>
                    </el-col>
                    <el-col :span="1">
                        <div class="grid-ss">{{df_seconds_0}}</div>
                    </el-col>

                </el-row>
            </el-main>

            <el-progress :percentage="percentageNum"></el-progress>

        </el-container>
    </div>
    <i class="el-icon-remove i-position-0" onclick="Formium.external.fun.JumpMinWindow()" title="缩小"></i>
    <i class="el-icon-error i-position-2" formium-command="close" title="关闭"></i>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                year_0: '0',
                year_1: '0',
                month_0: '0',
                month_1: '0',
                day_0: '0',
                day_1: '0',
                hour_0: '0',
                hour_1: '0',
                minutes_0: '0',
                minutes_1: '0',
                seconds_0: '0',
                seconds_1: '0',

                f_day_7: '0',
                f_day_6: '0',
                f_day_5: '0',
                f_day_4: '0',
                f_day_3: '0',
                f_day_2: '0',
                f_day_1: '0',
                f_day_0: '0',

                f_seconds_7: '0',
                f_seconds_6: '0',
                f_seconds_5: '0',
                f_seconds_4: '0',
                f_seconds_3: '0',
                f_seconds_2: '0',
                f_seconds_1: '0',
                f_seconds_0: '0',

                df_seconds_0: '0',
                df_seconds_1: '0',
                df_seconds_2: '0',
                df_seconds_3: '0',
                df_seconds_4: '0',
                df_seconds_5: '0',
                df_seconds_6: '0',
                df_seconds_7: '0',
                df_day_0: '0',
                df_day_1: '0',
                df_day_2: '0',
                df_day_3: '0',
                df_day_4: '0',

                df_year_0: '0',
                df_year_1: '0',
                df_month_0: '0',
                df_month_1: '0',
                ff_day_0: '0',
                ff_day_1: '0',
                df_hour_0: '0',
                df_hour_1: '0',
                df_minutes_0: '0',
                df_minutes_1: '0',
                ff_seconds_0: '0',
                ff_seconds_1: '0',
                isdisplay_none: true,
                isdisplay_none1: true,
                isdisplay_none2: true,
                percentageNum: 0,
            },
            methods: {
                onload: function () {
                    //启动定时器
                    //加减时间
                    this.countTimeStart();
                },
                countTimeStart: function () {
                    this.countTime();
                    this.fcountTime();
                    //定义this指向
                    const that = this
                    // 使用定时器 然后使用递归 让每一次函数能调用自己达到倒计时效果
                    setTimeout(function () {
                        that.countTimeStart();
                    }, 1000)
                },
                //倒计时
                countTime: function () {
                    // 定义结束时间戳
                    const end = Date.parse(new Date('2026-7-1 09:00:00'))
                    // 定义当前时间戳
                    const now = Date.parse(new Date())
                    // 用结束时间减去当前时间获得倒计时时间戳
                    const seconds = end - now;//毫秒吧
                    if (seconds < 0) return;
                    //秒
                    let newStr = ("00000000" + seconds).split("").reverse().join("");
                    this.f_seconds_0 = newStr[3];
                    this.f_seconds_1 = newStr[4];
                    this.f_seconds_2 = newStr[5];
                    this.f_seconds_3 = newStr[6];
                    this.f_seconds_4 = newStr[7];
                    this.f_seconds_5 = newStr[8];
                    this.f_seconds_6 = newStr[9];
                    this.f_seconds_7 = newStr[10];
                    //天
                    let newd = ("00000000" + (parseInt(seconds / 1000 / 60 / 60 / 24))).split("").reverse().join("");
                    this.f_day_0 = newd[0];
                    this.f_day_1 = newd[1];
                    this.f_day_2 = newd[2];
                    this.f_day_3 = newd[3];
                    this.f_day_4 = newd[4];
                    this.f_day_5 = newd[5];
                    this.f_day_6 = newd[6];
                    this.f_day_7 = newd[7];
                    //年
                    var year = parseInt(seconds / 1000 / 60 / 60 / 24 / 365); //算出年
                    this.year_0 = '0' + year;
                    this.year_0 = this.year_0.split("").reverse().join("");
                    this.year_1 = this.year_0[0];
                    this.year_0 = this.year_0[1];
                    //月
                    var month = parseInt((seconds - (year * 1000 * 60 * 60 * 24 * 365)) / 1000 / 60 / 60 / 24 / 30); //算出年
                    this.month_0 = '0' + month;
                    this.month_0 = this.month_0.split("").reverse().join("");
                    this.month_1 = this.month_0[0];
                    this.month_0 = this.month_0[1];
                    //日
                    var day = parseInt((seconds - (year * 1000 * 60 * 60 * 24 * 365) - (month * 1000 * 60 * 60 * 24 * 30)) / 1000 / 60 / 60 / 24); //算出年
                    this.day_0 = '0' + day;
                    this.day_0 = this.day_0.split("").reverse().join("");
                    this.day_1 = this.day_0[0];
                    this.day_0 = this.day_0[1];
                    //时
                    var hour = parseInt((seconds - (year * 1000 * 60 * 60 * 24 * 365) - (month * 1000 * 60 * 60 * 24 * 30) - (day * 1000 * 60 * 60 * 24)) / 1000 / 60 / 60); //算出年
                    this.hour_0 = '0' + hour;
                    this.hour_0 = this.hour_0.split("").reverse().join("");
                    this.hour_1 = this.hour_0[0];
                    this.hour_0 = this.hour_0[1];

                    //分钟
                    var minutes = parseInt((seconds - (year * 1000 * 60 * 60 * 24 * 365) - (month * 1000 * 60 * 60 * 24 * 30) - (day * 1000 * 60 * 60 * 24) - (hour * 1000 * 60 * 60)) / 1000 / 60); //算出年
                    this.minutes_0 = '0' + minutes;
                    this.minutes_0 = this.minutes_0.split("").reverse().join("");
                    this.minutes_1 = this.minutes_0[0];
                    this.minutes_0 = this.minutes_0[1];

                    //秒
                    var seconds_bg = parseInt((seconds - (year * 1000 * 60 * 60 * 24 * 365) - (month * 1000 * 60 * 60 * 24 * 30) - (day * 1000 * 60 * 60 * 24) - (hour * 1000 * 60 * 60) - (minutes * 1000 * 60)) / 1000); //算出年
                    this.seconds_0 = '0' + seconds_bg;
                    this.seconds_0 = this.seconds_0.split("").reverse().join("");
                    this.seconds_1 = this.seconds_0[0];
                    this.seconds_0 = this.seconds_0[1];
                },
                fcountTime: function () {
                    // 用结束时间减去当前时间获得倒计时时间戳
                    const ff_seconds = Date.parse(new Date()) - Date.parse(new Date('2023-7-1 00:00:00'));//毫秒吧
                    if (ff_seconds < 0) return;
                    //秒
                    let f_newStr = ("00000000" + ff_seconds).split("").reverse().join("");
                    this.df_seconds_0 = f_newStr[3];
                    this.df_seconds_1 = f_newStr[4];
                    this.df_seconds_2 = f_newStr[5];
                    this.df_seconds_3 = f_newStr[6];
                    this.df_seconds_4 = f_newStr[7];
                    this.df_seconds_5 = f_newStr[8];
                    this.df_seconds_6 = f_newStr[9];
                    this.df_seconds_7 = f_newStr[10];// == "0" ? "" : f_newStr[10];
                    //天
                    let f_newd = ("00000000" + (parseInt(ff_seconds / 1000 / 60 / 60 / 24))).split("").reverse().join("");
                    this.df_day_0 = f_newd[0];
                    this.df_day_1 = f_newd[1];
                    this.df_day_2 = f_newd[2];
                    this.df_day_3 = f_newd[3];

                    if (f_newd[3] == "0") {
                        this.df_day_3 = "";
                        if (f_newd[2] == "0") {
                            this.df_day_2 = "";
                        }
                    }

                    //年
                    var f_year = parseInt(ff_seconds / 1000 / 60 / 60 / 24 / 365); //算出年
                    this.df_year_0 = '0' + f_year;
                    this.df_year_0 = this.df_year_0.split("").reverse().join("");
                    this.df_year_1 = this.df_year_0[0];
                    this.df_year_0 = this.df_year_0[1];
                    //月
                    var f_month = parseInt((ff_seconds - (f_year * 1000 * 60 * 60 * 24 * 365)) / 1000 / 60 / 60 / 24 / 30); //算出年
                    this.df_month_0 = '0' + f_month;
                    this.df_month_0 = this.df_month_0.split("").reverse().join("");
                    this.df_month_1 = this.df_month_0[0];
                    this.df_month_0 = this.df_month_0[1];
                    //日
                    var f_day = parseInt((ff_seconds - (f_year * 1000 * 60 * 60 * 24 * 365) - (f_month * 1000 * 60 * 60 * 24 * 30)) / 1000 / 60 / 60 / 24); //算出年
                    this.ff_day_0 = '0' + f_day;
                    this.ff_day_0 = this.ff_day_0.split("").reverse().join("");
                    this.ff_day_1 = this.ff_day_0[0];
                    this.ff_day_0 = this.ff_day_0[1];
                    //时
                    var f_hour = parseInt((ff_seconds - (f_year * 1000 * 60 * 60 * 24 * 365) - (f_month * 1000 * 60 * 60 * 24 * 30) - (f_day * 1000 * 60 * 60 * 24)) / 1000 / 60 / 60); //算出年
                    this.df_hour_0 = '0' + f_hour;
                    this.df_hour_0 = this.df_hour_0.split("").reverse().join("");
                    this.df_hour_1 = this.df_hour_0[0];
                    this.df_hour_0 = this.df_hour_0[1];

                    //分钟
                    var f_minutes = parseInt((ff_seconds - (f_year * 1000 * 60 * 60 * 24 * 365) - (f_month * 1000 * 60 * 60 * 24 * 30) - (f_day * 1000 * 60 * 60 * 24) - (f_hour * 1000 * 60 * 60)) / 1000 / 60); //算出年
                    this.df_minutes_0 = '0' + f_minutes;
                    this.df_minutes_0 = this.df_minutes_0.split("").reverse().join("");
                    this.df_minutes_1 = this.df_minutes_0[0];
                    this.df_minutes_0 = this.df_minutes_0[1];

                    //秒
                    var ff_seconds_bg = parseInt((ff_seconds - (f_year * 1000 * 60 * 60 * 24 * 365) - (f_month * 1000 * 60 * 60 * 24 * 30) - (f_day * 1000 * 60 * 60 * 24) - (f_hour * 1000 * 60 * 60) - (f_minutes * 1000 * 60)) / 1000); //算出年
                    this.ff_seconds_0 = '0' + ff_seconds_bg;
                    this.ff_seconds_0 = this.ff_seconds_0.split("").reverse().join("");
                    this.ff_seconds_1 = this.ff_seconds_0[0];
                    this.ff_seconds_0 = this.ff_seconds_0[1];
                    /*****************************************/
                    if (this.df_year_1 == "0") {
                        this.isdisplay_none = false;
                        this.df_year_1 = this.df_year_1 == "0" ? "" : this.df_year_1;

                        if (this.df_month_0 == "0") {
                            this.isdisplay_none1 = false;
                            this.df_month_0 = this.df_month_0 == "0" ? "" : this.df_month_0;

                            if (this.df_month_1 == "0") {
                                this.isdisplay_none2 = false;
                                this.df_month_1 = this.df_month_1 == "0" ? "" : this.df_month_1;
                            }
                        }
                    }
                    this.jss();
                },
                jss: function () {
                    const tstart = Date.parse(new Date('2023-7-1 09:00:00'))
                    const tnow = Date.parse(new Date());
                    const tend = Date.parse(new Date('2026-7-1 09:00:00'))
                    const countNum = tend - tstart;
                    const ingNum = tnow - tstart;
                    this.percentageNum = (ingNum * 100 / countNum).toFixed(6);
                }
            }
        });

        window.onload = function () {
            app.onload();
        }
    </script>

    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            padding-bottom: 5px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-row {
            margin-bottom: 4px;
            height: 50px;
        }

        .el-row-x {
            height: 24px;
        }

        .el-row-y {
            line-height: 50px;
        }

        .el-col {
            border-radius: 4px;
            margin-bottom: 0;
            height: 100%;
        }

        .grid-content {
            background: #CCCCFF;
            border-radius: 10px;
            font-size: 25px;
        }

        .grid-ss {
            font-size: 25px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
    <style>
        .header_0 {
            background: linear-gradient(160deg, #b100ff 20%, #00b3ff 80%);
            color: #ffffff;
        }

        .i-position-0, .i-position-1, .i-position-2 {
            position: absolute;
            z-index: 999;
            user-drag: none;
            user-select: none;
            -moz-user-select: none;
            -webkit-user-drag: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -webkit-app-region: no-drag;
        }

        .i-position-0 {
            top: 10px;
            right: 30px;
            color: #000000;
        }

        .i-position-2 {
            top: 10px;
            right: 10px;
            color: #000000;
        }

        .bg-1 {
            background: linear-gradient(160deg, #b100ff 20%, #00b3ff 80%);
            color: #ffffff;
            border-radius: 2px;
            font-size: 16px;
        }

        .el-progress-bar {
            padding-right: 90px;
            margin-right: -90px;
        }

        .el-icon-lightning {
            color: #ffdb04
        }

        .el-icon-bangzhu {
            color: #f4fe16
        }

        .el-icon-medal-1 {
            color: #158cff
        }

        .el-icon-loading {
            color: #f60000
        }

        .el-icon-ship {
            color: #f4fe16
        }

        .el-icon-fork-spoon {
            color: #f4fe16
        }

        .el-icon-food {
            color: #f4fe16
        }

        .amilao1 {
            width: 100%;
            height: 50%;
            line-height: 23px;
        }

        .amilao2 {
            width: 100%;
            height: 50%;
            line-height: 23px;
        }
    </style>
</body>
</html>